<template>
  <div>
    <el-card class="box-card" style="margin:30px">
      <div slot="header" class="clearfix">
        <el-button type="warning" size="small">初始化菜单</el-button>
        <el-button type="primary" size="small">新增菜单</el-button>
      </div>

      <el-table
        :data="list"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :default-expand-all="false"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column
          prop="title"
          label="菜单名称"
          sortable
          width="200"
        />
        <el-table-column label="图标" sortable width="100">
          <template slot-scope="scope">
            <i :class="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column
          prop="level"
          label="等级"
          width="100"
        />
        <el-table-column
          prop="sort"
          label="排序"
          width="100"
        />
        <el-table-column
          prop="permissionValue "
          label="权限标识"
          width="200"
        />
        <el-table-column
          prop="path"
          label="路由"
          width="200"
        />
        <el-table-column
          prop="component "
          label="组建路径"
          width="200"
        />
        <el-table-column
          prop="status "
          label="是否可用"
          width="100"
        />
        <el-table-column
          prop="createTime "
          label="创建时间"
          width="200"
        />
      </el-table>

    </el-card>
  </div>
</template>
<script>
import { findAllPermissions } from '@/api/auth/permission'
export default {
  data() {
    return {
      list: []
    }
  },
  computed: {
  },
  created() {
    this.getlist()
  },
  methods: {
    getlist() {
      findAllPermissions().then(res => {
        this.list = res.data.menus
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
